<template>
  <!--会签管理-审批设置列表-付款申请设置弹窗-表单-->
  <a-spin :spinning="confirmLoading">
    <a-table ref="table" size="middle" :scroll="{x:true}" bordered  :columns="columns"
      :dataSource="dataSource" :pagination="false" class="j-table-force-nowrap"
      @change="handleTableChange" style="height: 600px">
      <template slot="htmlSlot" slot-scope="text">
        <div v-html="text"></div>
      </template>
      <template slot="imgSlot" slot-scope="text,record">
        <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
        <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt=""
          style="max-width:80px;font-size: 12px;font-style: italic;" />
      </template>
      <template slot="fileSlot" slot-scope="text">
        <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
        <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
          下载
        </a-button>
      </template>
      <template slot="isParallel" slot-scope="text,record">
        <div>{{record.isParallel === '1'?'是':'否'}}</div>
      </template>
      <template slot="isAttachment" slot-scope="text,record">
        <div>{{record.isAttachment === '1'?'是':'否'}}</div>
      </template>
    
      <span v-if="pageType === 'edit'" slot="action" slot-scope="text, record">
        <a @click="handleAddZur('edit',record)">编辑 </a>
        <a-divider type="vertical" />
        <a-popconfirm title="确定删除吗?" @confirm="handleDelete(record.id)"><a>删除</a></a-popconfirm>
      </span>
    </a-table>
  </a-spin>
</template>
<script>
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import { queryUserOtherTreeList } from '@/api/api'
import { log } from 'util'
const options = [{ label: '', value: '0' }]
export default {
  name: 'WtBrandForm',
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
    pageType:{
      type: String,
      default: '',
    }
  },
  data() {
    return {
      columns: [{
          title: '部门',
          align: "center",
          dataIndex: 'departName'
        },
        {
          title: '姓名',
          align: "center",
          dataIndex: 'approverName'
        },
        {
          title: '职位',
          align: "center",
          dataIndex: 'post'
        },
        {
          title: '审批序号',
          align: "center",
          dataIndex: 'number'
        }, {
          title: '是否并行审核',
          align: "center",
          dataIndex: 'isParallel',
          scopedSlots: {
            customRender: 'isParallel'
          }
        },
        , {
          title: '审核节点人数',
          align: "center",
          dataIndex: 'count'
        },
        , {
          title: '是否需要上传修改附件功能',
          align: "center",
          dataIndex: 'isAttachment',
          width: 80,
          scopedSlots: {
            customRender: 'isAttachment'
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          fixed: "right",
          width: 147,
          scopedSlots: {
            customRender: 'action'
          }
        }
      ],
      dataSource:[],
      width: 1000,
      // visibleDepart: false,
      visiblePeople: false,
      value: [],
      titlePeople: '选择审批部门负责人',
      options,
      treeData: [],
      checkedKeys: [],
      expandedKeysss: [],
      quanxian: [],
      warehouseId: '',
      templateId: '',
      id: '',
      post: '',
      realname: '',

      model: {
        people: [
          {
            people1: '',
          },
        ],
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {},

      treeData1: [],

    }
  },
  computed: {

  },
  created() {
    //备份model原始值
    this.loadTree()
    //this.loadData()
    // this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    handleAddZur(type,record){
      this.$emit('handleAddZur',type,record);
    },
    onChange1(approver, number, departId) {
      // console.log('ewq',c);
      console.log('approver = ', approver)
      console.log('number = ', number)
      console.log('departId = ', departId)
      if (this.quanxian.length > 0) {
        var index = this.quanxian.findIndex(item => item.approver=== approver)
        console.log('ewq',index);
        if (index == -1) {
          this.$set(this.quanxian, this.quanxian.length, {approver: approver, number: number, 'departId': departId})
        } else {
          this.quanxian.forEach((item, index) => {
            if(item.departId=== departId) {
              this.quanxian.splice(index, 1)
            }
          })
        }
      } else  {
        this.$set(this.quanxian, 0, {approver: approver, number: number, 'departId': departId})
      }
      console.log('打印:', this.quanxian)
    },
    handleDelete(record){
       console.log(33,record)
      this.$emit('handleDelete',record)
    },
    okPrivacyPeople() {
      this.visiblePeople = false
    },
    cancelPrivacyPeople() {
      this.visiblePeople = false
    },
    // okPrivacyDepart() {
    //   this.visibleDepart = false
    // },
    // cancelDepart() {
    //   this.visibleDepart = false
    // },
    // submitDepart() {
    //   this.visibleDepart = true

    //   //  console.log('fdw');
    // },
    submitPeople(e) {
      this.visiblePeople = true
      //  console.log('fdw');
    },
    onExpand(expandedKeys) {
      // console.log('onExpand')
      this.expandedKeysss = expandedKeys
      this.autoExpandParent = false
    },
    onTreeNodeSelect(id) {
      // console.log('onTreeNodeSelect')
      if (id && id.length > 0) {
        this.selectedKeys = id
      }
      // this.$refs.datarule.show(this.selectedKeys[0],this.roleId)
    },
    add() {
      this.edit(this.modelDefault)
    },
    edit(record) {
      console.log(111,record);
      // this.model = Object.assign({}, record);
      this.dataSource = JSON.parse(JSON.stringify(record))
      this.visible = true
      //this.templateId = record.id
      //this.loadTree(this.templateId)

    },
    loadTree(id) {
      //   getAction(`/sys/sysDepart/getDepartByOrgType?orgType=1`).then((res) => {
      //     if (res.success) {
      //     this.treeData1 = []
      //     let treeList1 = res.result
      //     for (let a = 0; a < treeList1.length; a++) {
      //       let temp = treeList1[a]
      //       temp.isLeaf = temp.leaf
      //       this.treeData1.push(temp)
      //     }
      //   }
      // })
      /* getAction(`/countersign/wtCountersignTemplateProcess/getList?templateId=${id}`).then((res) => {
        if (res.success) {
          this.treeData1 = []
          let treeList1 = res.result
          for (let a = 0; a < treeList1.length; a++) {
            let temp = treeList1[a]
            temp.isLeaf = temp.leaf
            this.treeData1.push(temp)
          }
        }
      }) */
    },
    loadData(id) {
      var that = this
      queryUserOtherTreeList().then((res) => {
        var mergeUserListAndChildren = (arr = []) => {
          if (arr.length > 0) {
            let tmp = []
            arr.forEach((item, index) => {
              let children = []
              if (!!item.children && item.children.length > 0) {
                children = mergeUserListAndChildren(
                  item.children.map((cItem) => {
                    return {
                      ...cItem,
                      isLeaf: false,
                      title: cItem.title,
                    }
                  })
                )
              }
              if (!!item.userList && item.userList.length > 0) {
                children = children.concat(
                  item.userList.map((item) => ({ ...item, key: item.id, isUser: 1, selectable: false }))
                )
              }
              tmp.push({
                ...item,
                children,
              })
            })
            return tmp
          }
          return []
        }
        this.treeData = mergeUserListAndChildren(res.result)
      })
    },

    onChange(c, id, post, realname) {
      this.post = post //职务
      this.realname = realname //名字
      this.id = id //用户id
    },
    addRcruit() {
      this.model.people.push({})
    },
    submitForm() {
      console.log('dsawq1',this.templateId);

      const that = this
      // 触发表单验证
      // console.log('dsawq1',that.templateId);
      // console.log('dsawq',that.quanxian);
      // debugger
      httpAction(
        '/countersign/wtCountersignTemplateProcess/addBatch',
        {
          templateId: that.templateId, //审批模板id
          list:that.quanxian
        },
        'POST'
      )
        .then((res) => {
          if (res.success) {
            that.$message.success(res.message)
            that.$emit('ok')
          } else {
            that.$message.warning(res.message)
          }
        })
        .finally(() => {
          that.confirmLoading = false
        })
      // this.$refs.form.validate((valid) => {
      //   if (valid) {
      //     that.confirmLoading = true
      //     let httpurl = ''
      //     let method = ''
      //     if (!this.model.id) {
      //       httpurl += this.url.add
      //       method = 'post'
      //     } else {
      //       httpurl += this.url.edit
      //       method = 'put'
      //     }
      //     httpAction(httpurl, this.model, method)
      //       .then((res) => {
      //         if (res.success) {
      //           that.$message.success(res.message)
      //           that.$emit('ok')
      //         } else {
      //           that.$message.warning(res.message)
      //         }
      //       })
      //       .finally(() => {
      //         that.confirmLoading = false
      //       })
      //   }
      // })
    },
  },
}
</script>
<style scoped>
.scroll-view {
  overflow: auto;
  overflow-y: scroll;
}
.container {
  width: 1000px;
  height: 1000px;
}
</style>